/**
 * 泛娱区块链 - 修改密码
 */

'use strict';

import React, {Component} from 'react'
import {StyleSheet, View,} from 'react-native';
import NavigationBar from '../../component/navigation/NavigationBar';
import TextInput from '../../component/common/TextInput';
import Button from '../../component/common/Button';
import VerificationCode from '../../component/common/VerificationCode';
import ServicesApi from '../../config/ServicesApi';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {observer, inject} from 'mobx-react'

@inject('loginStore')
@observer
export default class ChangePwd extends Component {

    constructor(props) {
        super(props);
        let {userInfo} = this.props.loginStore;
        this.params = this.props.navigation.state.params;
        this.inputData = {
            memberPhone: userInfo.user_phone || '',
            memberPassword: '',
        };
        this.state = {
            page_flag: this.params.page_flag || 'change',
            codeOpen: false,
        }
    }

    componentDidMount() {
    }

    _onChangeText = (key, text) => {
        this.inputData[key] = text
    }

    _onStopInterval = () => {
        this.setState({codeOpen: false})
    };


    _onPressChange = async () => {
        const {loginStore} = this.props;
        let params = {
            title: '温馨提示',
            detail: '',
            actions: [
                {
                    title: '确定', onPress: () => {
                    }
                }
            ]
        };

        if (!this.inputData['memberPhone']) {
            params['detail'] = '请检查手机号输入是否正确';
            AlertManager.show(params);
            return;
        }
        if (!this.inputData['code'] || this.inputData['code'].length < 4) {
            params['detail'] = '请检查验证码是否输入正确';
            AlertManager.show(params);
            return;
        }
        if (this.inputData['memberPassword'].length === 0) {
            params['detail'] = '请输入密码';
            AlertManager.show(params);
            return;
        }
        if (this.inputData['memberPassword'] !== this.inputData['memberPasswordTwo']) {
            params['detail'] = '两次输入的密码不一致';
            AlertManager.show(params);
            return;
        }

        let url = ServicesApi.USER_FORGET;
        let data = {
            user_phone: this.inputData['memberPhone'],
            new_pwd: this.inputData['memberPassword'],
            captcha: this.inputData['code'],
            type: 'forget_pwd'
        };
        const result = await Services.post(url, data);
        if (result.code === StatusCode.SUCCESS_CODE) {
            const params = {
                title: '温馨提示',
                detail: '修改成功！',
                actions: [
                    {
                        title: '确定',
                        onPress: () => {
                            loginStore.cleanUserInfo();
                            RouterHelper.reset('', 'Login');
                        }
                    }
                ]
            };
            AlertManager.show(params);
        } else {
            ToastManager.show(result.dec || 'error');
        }
    };

    _onPressVer = async () => {
        let params = {
            title: '温馨提示',
            detail: '',
            actions: [
                {
                    title: '确定', onPress: () => {
                    }
                }
            ]
        };
        if (!this.inputData['memberPhone']) {
            params['detail'] = '请检查手机号输入是否正确';
            AlertManager.show(params);
            return;
        }

        let url = ServicesApi.COMMON_SEND_SMS;
        let data = {
            phone: this.inputData['memberPhone'],
            sms_model: 'register_sms_model'
        };
        const result = await Services.post(url, data);
        if (result.code === StatusCode.SUCCESS_CODE) {
            ToastManager.show('发送成功');
            this.setState({codeOpen: true})
        } else {
            ToastManager.show(result.dec || 'error')
        }
    };

    render() {
        const {codeOpen, page_flag} = this.state;
        const pageTitle = this.params.pageTitle || '';
        // console.log('page_flag---->', page_flag);
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={pageTitle}
                />
                <KeyboardAwareScrollView>
                    <View style={styles.contentContainer}>
                        <View style={styles.loginInputStyle}>
                            {/*<Text title={styles.hintText}>+86</Text>*/}
                            {/*<ImageView style={styles.arrow} source={Images.icon_right_arrow}/>*/}
                            <TextInput
                                ref={(v) => this.phoneInput = v}
                                style={styles.inputStyle}
                                underlineColorAndroid={'transparent'}
                                defaultValue={this.inputData.memberPhone}
                                editable={page_flag !== 'change'}
                                maxLength={11}
                                onChangeText={(text) => this._onChangeText('memberPhone', text)}
                                placeholder={'手机号'}
                                keyboardType={'numeric'}
                            />
                        </View>
                        <View style={[styles.inputLine, {marginLeft: 30}]}/>
                        <View style={[Theme.RCB, styles.pwdStyle]}>
                            <TextInput
                                ref={(v) => this.codeInput = v}
                                style={styles.inputStyle}
                                underlineColorAndroid={'transparent'}
                                onChangeText={(text) => this._onChangeText('code', text)}
                                placeholder={'验证码'}
                                keyboardType={'numeric'}
                            />
                            <VerificationCode
                                open={codeOpen}
                                onStopInterval={this._onStopInterval}
                                onPress={this._onPressVer}/>
                        </View>
                        <View style={styles.pwdStyle}>
                            <View style={styles.inputLine}/>
                            <TextInput
                                ref={(v) => this.pwdInput = v}
                                style={styles.inputStyle}
                                underlineColorAndroid={'transparent'}
                                placeholder={'输入密码'}
                                onChangeText={(text) => this._onChangeText('memberPassword', text)}
                                secureTextEntry={true}
                            />
                            <View style={styles.inputLine}/>
                        </View>
                        <View style={styles.pwdStyle}>
                            <TextInput
                                ref={(v) => this.pwdTwoInput = v}
                                style={styles.inputStyle}
                                underlineColorAndroid={'transparent'}
                                placeholder={'确认密码'}
                                onChangeText={(text) => this._onChangeText('memberPasswordTwo', text)}
                                secureTextEntry={true}
                            />
                            <View style={styles.inputLine}/>
                        </View>
                        <Button style={styles.button} title={'完成'} onPress={this._onPressChange}/>
                    </View>
                </KeyboardAwareScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    headerLine: {
        width: Theme.screenWidth,
        height: Theme.minPixel,
        backgroundColor: '#979797',
    },
    arrow: {
        width: 7,
        height: 8,
    },
    contentContainer: {
        flex: 1
    },
    loginInputStyle: {
        height: 50,
        marginTop: 15,
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 30,
    },
    pwdStyle: {
        // marginTop: 10,
        height: 60,
        marginLeft: 30,
    },
    hintText: {
        fontSize: FontSize(16),
        color: '#333'
    },
    inputStyle: {
        flex: 1,
        height: 44,
        fontSize: FontSize(16),
        // backgroundColor: 'red',
    },
    titleLine: {
        backgroundColor: '#ececec',
        height: 1,
        marginLeft: 30,
        marginRight: 30,
        marginTop: 8,
        marginBottom: 37,
    },
    inputLine: {
        backgroundColor: '#ececec',
        height: 1,
        marginRight: 30,
        marginBottom: 5,
    },
    forgetStyle: {
        paddingTop: 8,
        paddingBottom: 8,
        alignItems: 'flex-end',
        marginRight: 30,
    },
    forgetPwd: {
        fontSize: FontSize(13),
        color: "#ffcc9b"
    },
    button: {
        marginTop: 25,
        marginHorizontal: 30,
        backgroundColor: '#ffa64f',
        color: '#fff'
    },
    bottomStyle: {
        flex: 1,
        marginTop: 155,
        alignItems: 'center',
        marginLeft: 15,
        marginRight: 15,
    },
    registerBottomStyle: {
        flex: 1,
        marginTop: 59,
        alignItems: 'center',
        marginLeft: 15,
        marginRight: 15,
    },
});